<!DOCTYPE html><html class="appearance-light" lang="zh-CN"><head><meta charset="UTF-8"><title>Hexo next主题 更新社交链接图标 引入iconfont阿里巴巴矢量图标库</title><meta name="description" content="如你所见, 希望做个能言善道的人"><meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, initial-scale=1"><!-- Google Analytics --><!-- End Google Analytics -->
<!-- Baidu Analytics --><!-- End Baidu Analytics --><link rel="icon" href="/images/touxiang.jpg"><link rel="stylesheet" href="/style/common/bulma.css"><link rel="stylesheet" href="/style/base.css"><link rel="stylesheet" href="/style/icon.css"><link rel="stylesheet" href="/style/common/helper.css"><script src="/js/common.js"></script><link rel="stylesheet" href="/style/post.css"><link rel="stylesheet" href="/style/themes/highlight-theme-light.css"><script src="/js/highlight.pack.js"></script><meta name="description" content="简简单单 在博客主题的自定义css文件引入图标链接即可 记得CTRL+F5刷新哦


找到图标下单进入阿里巴巴矢量图标库搜索图标，加入购物车，在购物车中选择添加至项目，如果没有则新建一个。
生成图标链接进入项目，选择Font Class选项，点击查看在线链接复制链接到浏览器地址栏打开，复制网页内容，大概是这个样子
@font-face &amp;#123;&amp;#125;
.iconfont &amp;#123;&amp;#125;
.xxx:before &amp;#123;&amp;#125;

找到主题的自定义css文件配置文件路径 \themes\next\source\css\_custom\custom.styl如果没有则新建一个，然后把内容粘贴进去，可做适当修改
# xxx是在主题配置文件使用图标要用到的图标名 可修改成自己想要的
.x.."><meta name="generator" content="Hexo 5.4.0"></head><body class="is-flex is-flex-direction-column"><header class="header-widget is-flex-shrink-0 is-hidden-mobile"><div class="container is-fullhd is-flex is-justify-content-space-between is-align-items-center is-full-height"><section class="is-hidden-mobile is-flex-shrink-0"><h2><a href="/">insight's blog</a></h2></section><h3 class="is-hidden-mobile is-family-serif is-full-height is-flex is-align-items-center is-flex-shrink-0"><div class="is-full-height" id="postTopic"><p class="is-full-height is-flex-shrink-0 is-flex is-align-items-center is-justify-content-center">Hexo next主题 更新社交链接图标 引入iconfont阿里巴巴矢量图标库</p><p class="is-full-height is-flex-shrink-0 is-flex is-align-items-center is-justify-content-center">点击返回顶部</p></div></h3><aside class="is-flex-shrink-0"><h3 class="is-inline-block"><a href="/">首页</a></h3><h3 class="is-inline-block"><a href="/about">关于</a></h3><h3 class="is-inline-block"><a href="/archives">归档</a></h3></aside></div></header><header class="is-flex header-widget is-flex-shrink-0 is-align-items-center is-justify-content-center is-hidden-tablet"><h3 class="is-inline-block"><a href="/">首页</a></h3><h3 class="is-inline-block"><a href="/about">关于</a></h3><h3 class="is-inline-block"><a href="/archives">归档</a></h3></header><main><main class="container is-max-widescreen content section post-page pt-4 px-4"><div class="columns is-flex-desktop is-justify-content-center is-flex-direction-row-reverse"><div class="column is-3 is-hidden-mobile"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%89%BE%E5%88%B0%E5%9B%BE%E6%A0%87%E4%B8%8B%E5%8D%95"><span class="toc-text">找到图标下单</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%94%9F%E6%88%90%E5%9B%BE%E6%A0%87%E9%93%BE%E6%8E%A5"><span class="toc-text">生成图标链接</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%89%BE%E5%88%B0%E4%B8%BB%E9%A2%98%E7%9A%84%E8%87%AA%E5%AE%9A%E4%B9%89css%E6%96%87%E4%BB%B6"><span class="toc-text">找到主题的自定义css文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BF%AE%E6%94%B9%E4%B8%BB%E9%A2%98%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="toc-text">修改主题的配置文件</span></a></li></ol></div><div class="column is-9"><header class="my-4"></header><h1 class="mt-0 mb-1 is-family-serif" id="postTitle">Hexo next主题 更新社交链接图标 引入iconfont阿里巴巴矢量图标库</h1><time class="has-text-grey" datetime="2021-06-21T04:22:40.389Z">2021-06-21</time><article class="mt-2 post-content"><p>简简单单 在博客主题的自定义css文件引入图标链接即可 记得CTRL+F5刷新哦</p>
<span id="more"></span>

<h2 id="找到图标下单"><a href="#找到图标下单" class="headerlink" title="找到图标下单"></a>找到图标下单</h2><p>进入<a target="_blank" rel="noopener" href="https://www.iconfont.cn/">阿里巴巴矢量图标库</a><br>搜索图标，加入购物车，在购物车中选择添加至项目，如果没有则新建一个。</p>
<h2 id="生成图标链接"><a href="#生成图标链接" class="headerlink" title="生成图标链接"></a>生成图标链接</h2><p>进入项目，选择<code>Font Class</code>选项，点击<code>查看在线链接</code><br>复制链接到浏览器地址栏打开，复制网页内容，大概是这个样子</p>
<pre><code>@font-face &#123;&#125;
.iconfont &#123;&#125;
.xxx:before &#123;&#125;
</code></pre>
<h2 id="找到主题的自定义css文件"><a href="#找到主题的自定义css文件" class="headerlink" title="找到主题的自定义css文件"></a>找到主题的自定义css文件</h2><p>配置文件路径 <code>\themes\next\source\css\_custom\custom.styl</code><br>如果没有则新建一个，然后把内容粘贴进去，可做适当修改</p>
<pre><code># xxx是在主题配置文件使用图标要用到的图标名 可修改成自己想要的
.xxx:before &#123;&#125;
# 比如我改成gitee
.gitee:before &#123;&#125;
</code></pre>
<h2 id="修改主题的配置文件"><a href="#修改主题的配置文件" class="headerlink" title="修改主题的配置文件"></a>修改主题的配置文件</h2><p>在主题的配置文件中找到<code>social</code>选项<br>按照如下格式配置:</p>
<pre><code>social:
  # 自定义社交链接名称: 个人主页链接 || custom 图标名
  Gitee: https://gitee.com/insight21 || custom gitee
</code></pre>
<p>到此就把社交链接图标更新完啦！如果有疑惑可以联系我！</p>
</article><section class="jump-container is-flex is-justify-content-space-between my-6"><!-- em is empty placeholder--><a class="button is-default" href="/archives/988733517/" title="Go tour Go 语言之旅 练习题"><i class="iconfont icon-prev mr-2 has-text-grey"></i><span class="has-text-weight-semibold">上一页: Go tour Go 语言之旅 练习题</span></a><a class="button is-default" href="/archives/465097960/" title="Acwing寒假每日一题(提高组) 打卡记录 题解"><span class="has-text-weight-semibold">下一页: Acwing寒假每日一题(提高组) 打卡记录 题解</span><i class="iconfont icon-next ml-2 has-text-grey"></i></a></section><article class="mt-6 comment-container"><script async src="https://utteranc.es/client.js" issue-term="pathname" theme="preferred-color-scheme"></script></article></div></div></main></main><footer class="is-flex is-flex-direction-column is-align-items-center is-flex-shrink-0 is-family-serif"><section class="sns-container"><!-- Github--><a title="github" target="_blank" rel="noopener nofollow" href="//github.com/insight-21"><i class="iconfont icon-github"></i></a><!-- Gitee--><a title="gitee" target="_blank" rel="noopener nofollow" href="//gitee.com/insight21"><i class="iconfont icon-gitee"></i></a><!-- Ins--><!-- RSS--><!-- 知乎--><!-- 领英--><!-- 脸书--></section><p><span>Copyright ©</span><span> insight 2021</span></p><div class="is-flex is-justify-content-center is-flex-wrap-wrap"><p>Powered by Hexo &verbar;&nbsp;</p><p class="is-flex is-justify-content-center"><a title="Hexo theme author" target="_blank" rel="noopener" href="//github.com/haojen">Theme by Haojen&nbsp;</a></p><div style="margin-top: 2px"><a class="github-button" title="github-button" target="_blank" rel="noopener" href="https://github.com/haojen/hexo-theme-Claudia" data-color-scheme="no-preference: light; light: light; dark: dark;" data-show-count="true"></a></div></div><div><span></span></div></footer><script async defer src="https://buttons.github.io/buttons.js"></script><script src="/js/post.js"></script></body></html>